<template>
  <view class="commodity">
    <!-- 购物车列表项 商品 -->
    <view class="checkout_view">
      <image
        class="checkout_img"
        src="@/static/icon/checkout_active.png"
        mode="aspectFill"
      />
      <!-- <image
        class="checkout_img"
        src="@/static/icon/checkout.png"
        mode="aspectFill"
      /> -->
    </view>
    <view class="img_view">
      <image
        style="height: 100%; width: 100%"
        src="@/assets/test/a1.png"
        mode="aspectFill"
      />
    </view>
    <view class="commodity_info">
      <view class="title"> 商品名称 </view>
      <view class="teshui">
        <view class="special">特价</view>
      </view>
      <view class="price_view">
        <text class="price"> $399 </text>

        <view class="step_view">
          <view class="step_btn"><text class="icon">-</text></view>
          <view class="num">{{ 1 }}</view>
          <view class="step_btn"><text class="icon">+</text></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
</script>

<style lang="scss" scoped>
.commodity {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  .checkout_view {
    width: 40rpx;
    height: 40rpx;
    overflow: hidden;
    .checkout_img {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
    }
  }
  .img_view {
    margin: 0 24rpx;
    width: 160rpx;
    height: 160rpx;
    overflow: hidden;
    background-color: #fafafa;
  }
  .commodity_info {
    display: flex;
    flex: 1;
    min-height: 200rpx;
    flex-direction: column;
    justify-content: space-between;
    .title {
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
      line-height: 36rpx;
      overflow: hidden;
      display: -webkit-box;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
    .teshui {
      margin-top: 0;
      margin-bottom: auto;
      display: flex;
      padding-top: 10rpx;
      .special {
        height: fit-content;
        width: fit-content;
        display: inline-block;
        border-radius: 2px;
        padding: 2px;
        font-weight: 400;
        font-size: 18rpx;
        color: #333333;
        line-height: 21rpx;
        border: 1rpx solid #333333;
        margin-right: 10rpx;
      }
    }
    .price_view {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .price {
        font-weight: 500;
        font-size: 30rpx;
        color: #eb5757;
        line-height: 26rpx;
      }

      .step_view {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .step_btn {
          width: fit-content;
          background: #f8f9fa;
          border-radius: 50%;
          font-size: 18px;
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: hidden;
          width: 46rpx;
          height: 46rpx;
          .icon {
            font-size: 28rpx;
            color: #333333;
            line-height: 1;
            font-weight: 500;
          }
        }
        .num {
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
          line-height: 1;
          width: 80rpx;
          text-align: center;
        }
      }
    }
  }
}
</style>
